﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>



<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
    <div id="adminUsersContent" dojoType="dojox.layout.ContentPane" title="Users" selected="true">
        <span id="adminUsersAdd" dojoType="dijit.form.Button">Add User</span>
        <span id="adminUsersDelete" dojoType="dijit.form.Button">Delete Selected User</span>
        <div id="adminUserGrid" dojoType="dojox.layout.ContentPane" height="100%"></div>
    </div>
    <div dojoType="dojox.layout.ContentPane" title="Roles">
        <div dojoType="dijit.layout.BorderContainer">
            <div dojoType="dojox.layout.ContentPane" region="left">
                <ul dojoType="dijit.Menu" id="rolesUser_menu" style="display: none;">
                    <li dojoType="dijit.MenuItem">
                    Remove
                    </li>
                </ul>
               <div  id="adminRolesRoles"></div>
            </div>
            <div dojoType="dojox.layout.ContentPane" region="center">
                <div  id="adminRolesUsers"></div>
            </div>
        </div>
    </div>
    <div dojoType="dojox.layout.ContentPane" title="Applications">
           Lorem ipsum and all around - last...
    </div>
</div>


<script>
    dojo.require("dijit.Tree");
    dojo.require("dijit.Menu");
    dojo.require("dijit.tree.dndSource");
    dojo.require("dojox.json.schema");
    dojo.require("dojox.data.JsonRestStore");
    dojo.addOnLoad(function () {

        var userStore = new dojox.data.JsonRestStore({
            target: HOMEROOT + "Data/Users",
            idAttribute: "Id"
        });

        var roleStore = new dojox.data.JsonRestStore(
        {
            target: HOMEROOT + "Data/Roles",
            idAttribute: "Id"
        });

        var userGrid = new dojox.grid.EnhancedGrid(
        {
            store: userStore,
            plugins: { nestedSorting: true },
            clientSort: true,
            rowSelector: "20px",
            selectMode: "single",
            columnReordering: true,
            structure: [
            { name: "Id", field: "Id", width: "20px" },
            { name: "Name", field: "Name", width: "100px", editable: true },
            { name: "Login", field: "Login", width: "100px", editable: true }
            ]
        }, document.createElement('div'));
        dijit.byId("adminUserGrid").containerNode.appendChild(userGrid.domNode);

        dojo.connect(userGrid, "onApplyCellEdit", function (inValue, inRowIndex, inAttrName) {
            this.store.save();
            this.updateRow(inRowIndex);
        });

        userGrid.startup();

        dojo.connect(dijit.byId("adminUsersAdd"), "onClick", userGrid, function (evt) {
            var myNewItem = {
                Name: "",
                Login: ""
            };
            this.store.newItem(myNewItem);
            this.store.save();
        });

        dojo.connect(dijit.byId("adminUsersDelete"), "onClick", userGrid, function (evt) {
            if (confirm("Are you sure you want to delete this user?")) {
                var items = this.selection.getSelected();
                if (items.length) {
                    dojo.forEach(items, function (selectedItem) {
                        if (selectedItem !== null) {
                            this.store.deleteItem(selectedItem);
                        }
                    }, this);
                    this.store.save();
                }
            }
        });

        function newUserUnderRole(args, parent, insertIndex) {
            this.store.setValue(parent, "Users", parent.Users.concat([args]));
            this.store.save();
        }

        var rolesModel = new dijit.tree.ForestStoreModel({
            store: roleStore,
            labelAttr: "Name",
            rootLabel: "Roles",
            newItem: newUserUnderRole,
            childrenAttrs: ["Users"]
        });

        function itemTreeCheckItemAcceptance(node, source) {
            var item = dijit.getEnclosingWidget(node).item;
            if (item.Users) {
                return true;
            }
            return false;
        }
        function dndAccept(source, nodes) {
            if (this.tree.id == "adminRolesRoles") {
                return true;
            }
            return false;
        }

        var rolesTree = new dijit.Tree({
            model: rolesModel,
            dndController: "dijit.tree.dndSource",
            checkAcceptance: dndAccept,
            checkItemAcceptance: itemTreeCheckItemAcceptance
        },
        "adminRolesRoles");

        var menu = dijit.byId("rolesUser_menu");
        menu.bindDomNode(rolesTree.domNode);
        dojo.connect(menu, "_openMyself", rolesModel, function (e) {
            var tn = dijit.getEnclosingWidget(e.target);
            dojo.forEach(menu.getChildren(),function (i) {
                i.attr('disabled', tn.item.root || tn.item.Users);
            });
            var model = this;
            menu.getChildren()[0].onClick = function () {
                var user = tn.item;
                var role = tn.getParent().item;
                if (confirm("Are you sure you want to remove " + user.Name + " from " + role.Name + " role?")) {
                    var newList = dojo.filter(role.Users, function (u) { return !(u === user); });
                    model.store.setValue(role, "Users", newList);
                    model.store.save();
                }
            };
        });

        var userModel = new dijit.tree.ForestStoreModel({
            store: userStore,
            labelAttr: "Name",
            rootLabel: "Users"
        });

        var userTree = new dijit.Tree({
            model: userModel,
            checkAcceptance: dndAccept,
            dndController: "dijit.tree.dndSource"
        },
        "adminRolesUsers");


        dijit.byId("adminRolesRoles").dndController.itemCreator = function (/*DomNode[]*/nodes, target, /*dojo.dnd.Source*/source) {
            //console.log("itemCreator");
            dojo.map(nodes,
            function (node) {
                var item = dijit.getEnclosingWidget(node).item;
                //console.log(item);
                //console.log(dojox.json.schema.validate(item, UsersSchema));
            });
            //console.log(target); console.log(source);
            return dojo.map(nodes, function (node) {
                return dijit.getEnclosingWidget(node).item;
            });
        }
    });
</script>
